import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
import { createStyleImportPlugin, AndDesignVueResolve } from 'vite-plugin-style-import';

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, __dirname);
  return {
    base: env.VITE_BASE_URL,
    plugins: [
      vue(),
      AutoImport({
        // 这里除了引入 vue 以外还可以引入pinia、vue-router、vueuse等，
        // 甚至你还可以使用自定义的配置规则，见 https://github.com/antfu/unplugin-auto-import#configuration
        imports: ['vue', 'vue-router'],
        // 第三方组件库的解析器
        resolvers: [AntDesignVueResolver(), ElementPlusResolver()],
      }),
      Components({
        // dirs 指定组件所在位置，默认为 src/components
        // 可以让我们使用自己定义组件的时候免去 import 的麻烦
        dirs: ['src/components/'],
        // 配置需要将哪些后缀类型的文件进行自动按需引入
        extensions: ['vue'],
        // 解析的 UI 组件库，这里以 Element Plus 和 Ant Design Vue 为例
        resolvers: [AntDesignVueResolver(), ElementPlusResolver()],
      }),
      createStyleImportPlugin({
        resolves: [AndDesignVueResolve(), ElementPlusResolver()],
      }),
    ],
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
      },
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@import "src/styles/global.scss";`,
        },
        less: {
          javascriptEnabled: true,
        },
      },
    },
    server: {
      port: 8011,
      host: '0.0.0.0',
      proxy: {
        '^/tsp-api/': {
          target: env.VITE_PROXY_URL,
          changeOrigin: true,
        },
      },
    },
    // build: {
    //   // sourcemap: env.VITE_SOURCE_MAP === 'on',
    // },
  };
});
